<template>
    <div>
        <el-tag :key="index" v-for="(tag,index) in dynamicTags" :class="['pageTag',index == $store.state.page ? 'active' : '',index%2 == 0?'':'background']" closable :disable-transitions="true" @click="handleClick(index)" @dblclick.native="changeValue(tag)" @close="handleClose(index)">
            {{tag}}
        </el-tag>
        <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" clearable @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
        </el-input>
        <el-button v-else class="button-new-tag" @click="showInput">+ 新建页面</el-button>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {
            inputVisible: false,
            inputValue: '',
            tempTag: '',
            isChange: false,
            isRepeatedData: false,
            time: null,
        }
    },
    computed: mapState(['dynamicTags']),
    watch: {},
    methods: {
        handleClick(index) {
            clearTimeout(this.time)
            this.time = setTimeout(() => {
                this.$store.commit('setPage', index) //单击
            }, 300)
        },
        handleClose(index) {
            if (this.dynamicTags.length > 1) {
                this.dynamicTags.splice(index, 1)
                //删除对应页面所有组件
                this.$store.commit('deletePageComponents', index)
            } else {
                this.$message.error('错误!至少保留一个页面！')
            }
        },

        showInput() {
            this.tempTag = ''
            this.inputVisible = true
            this.inputValue = ''
            this.isChange = false
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus()
            })
        },

        handleInputConfirm() {
            this.isRepeatedData = false
            let inputValue = this.inputValue
            //去除空格
            inputValue = inputValue.replace(/^\s\s*/, '').replace(/\s\s*$/, '')
            if (inputValue == '') {
                this.inputVisible = false
                return
            }
            //判断新增的值是否重复
            if (this.dynamicTags.indexOf(inputValue) != -1 && this.tempTag != inputValue) {
                this.isRepeatedData = true
                this.openWarring()
                return
            } else {
                this.isRepeatedData = false
            }
            //判断是否修改原有的值，是则替换修改好的值，否则新增
            if (this.isChange) {
                this.dynamicTags[this.dynamicTags.indexOf(this.tempTag)] = this.inputValue
                this.inputVisible = false
                return
            }
            if (inputValue) {
                this.dynamicTags.push(inputValue)
                this.$store.commit('setPage', this.dynamicTags.length - 1)
            }
            this.inputVisible = false
            this.inputValue = ''
        },

        changeValue(tag) {
            clearTimeout(this.time)
            this.inputVisible = true
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus()
            })
            this.inputValue = tag
            this.tempTag = tag
            this.isChange = true
        },

        //提示
        openWarring(text) {
            if (!text) {
                var text = '警告!不允许添加重复页面！'
            }
            this.$message({
                message: text,
                type: 'warning',
            })
        },
    },
    created() {},
    mounted() {},
    beforeCreate() {},
    beforeMount() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
    activated() {},
    components: {},
}
</script>

<style lang='scss' scoped>
.el-tag {
    cursor: pointer;
    width: 80%;
    display: flex;
    padding: 0 5% 0 15%;
    margin: 10px 5%;
    justify-content: space-between;
    align-items: center;
    color: #fff;
}
.el-tag:hover {
    background: #00bcd45e;
}
.button-new-tag {
    margin: 10px 5%;
    width: 205px;
    height: 32px;
    line-height: 30px;
    border: none;
    padding-top: 0;
    padding-bottom: 0;
    background: linear-gradient(270deg, #69abb3 0%, #62c1ce 29%, #25a3b8 100%);
}
.input-new-tag {
    width: 50%;
    margin-left: 10%;
    vertical-align: bottom;
}
.active {
    color: #fff;
    background: linear-gradient(270deg, #69abb3 0%, #62c1ce 29%, #25a3b8 100%) !important; 
}
.pageTag {
    width: 205px;
    height: 32px;
    background: #273045;
    border-radius: 4px;
    opacity: 0.87;
    border: none;
}
.background {
    background: #ffffff1a;
}
</style>